<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--引入当前页面样式表-->
    <link href="./css/style.css" rel="stylesheet" type="text/css" />
    <!--引入MapBox_GL样式表-->
    <link href="./css/MapBox_GL.css" rel="stylesheet" type="text/css" />
    <!--引入MapBox_GL脚本库-->
    <script src="./js/MapGis_MapBox_product.js" type="text/javascript"></script>
    <script type="text/javascript">

        // 使用严格模式
        "use strict";
        // 设置地图对象为全局变量
        var map;
        /**显示地图
        */
        function init() {
            // mapboxgl.accessToken = 'pk.eyJ1Ijoiam9obmZvcnJlc3QiLCJhIjoiY2tjeXBrN3JjMGM0ZzJ3cnl0OWJscHlxYSJ9.GsQMG6Tfi05l4BbRqegJeQ';
  
            map = new mapboxgl.Map({
                container: "map",
                style: {
                    //设置版本号，一定要设置
                    "version": 8,
                    //添加来源
                    "sources": {
                        "img_w": {
                            //来源类型为栅格瓦片
                            "type": "raster",
                            'tiles': [
                                //来源请求地址
                                "http://t0.tianditu.gov.cn/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762",//parent.getTiandituKey()为天地图密钥
                            ],
                            //栅格瓦片的分辨率
                            'tileSize': 256
                        },
                        "cia_w": {
                            //来源类型为栅格瓦片
                            "type": "raster",
                            'tiles': [
                                //来源请求地址
                                "http://t0.tianditu.gov.cn/DataServer?T=cia_w&X={x}&Y={y}&L={z}&tk=88735d6d9bbd5930f1b1c8b8df72e762",//parent.getTiandituKey()为天地图密钥
                            ],
                            //栅格瓦片的分辨率
                            'tileSize': 256
                        }
                    },
                    //设置加载并显示来源的图层信息
                    "layers": [
                        {
                            //图层id，要保证唯一性
                            "id": "img_w",
                            //图层类型
                            "type": "raster",
                            //图层来源
                            "source": "img_w",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        },
                        {
                            //图层id，要保证唯一性
                            "id": "cia_w",
                            //图层类型
                            "type": "raster",
                            //图层来源
                            "source": "cia_w",
                            //图层最小缩放级数
                            "minzoom": 0,
                            //图层最大缩放级数
                            "maxzoom": 17
                        }
                    ],
                    // 对应MapGis的符号库，采取svg实现
                    sprite: "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/sprite",
                    // 对应MapGis的字体库，采取pbf实现
                    glyphs: "http://develop.smaryun.com:6163/igs/rest/mrms/vtiles/fonts/{fontstack}/{range}.pbf"
                },
                center: [118, 38],
                zoom: 5
            });



            map.on("load", function () {
                // 从GeoJSON数据添加一个新的源并设置“cluster”选项为true。GL-JS将把point_count属性添加到源数据中。
                map.addSource("earthquakes", {
                    type: "geojson",
                    // data: "./data/provincecity.geojson",
                    // data: "./data/earthquakes.geojson",
                    data: "https://docs.mapbox.com/mapbox-gl-js/assets/earthquakes.geojson",
                    // data.data,//将上面的换成我所需要的
                    cluster: true,
                    clusterMaxZoom: 14, //最大缩放到群集点
                    clusterRadius: 50 // 每一组点的半径（=50）
                });
                // 外围有数字的圆圈，加晕染
                map.addLayer({
                    id: "clusters",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["has", "countTotal"],  //这个地方是返回值是countTotal，所以要改成你要展示的数字
                    paint: {
                        //*蓝色，当点数小于100时为20px圆
                        //*点计数在100到750之间时为黄色，21px圆
                        //*点计数大于或等于750时为22像素的粉红色圆圈
                        "circle-color": [
                            "step",
                            ["get", "countTotal"],
                            "rgba(81, 187, 214, 0.8)",
                            100,
                            "rgba(241, 240, 117, 0.8)",
                            750,
                            "rgba(242, 140, 177, 0.8)"
                        ],
                        "circle-radius": [
                            "step",
                            ["get", "countTotal"],
                            20, //蓝色，当点数小于100时为20px圆
                            100, //对应上面circle-color 数字，意思为100以内
                            21, //点计数在100到750之间时为黄色，21px圆
                            750, //对应上面circle-color 数字，意思为750以内
                            22 //点计数大于或等于750时为22像素的粉红色圆圈
                        ],
                        // 这个是外边框的颜色 circle-stroke-color这个对应了上面circle-color
                        "circle-stroke-color": [
                            "step",
                            ["get", "countTotal"],
                            "rgba(81, 187, 214, 0.2)",
                            100,
                            "rgba(241, 240, 117, 0.2)",
                            750,
                            "rgba(242, 140, 177, 0.2)"
                        ],
                        // 这个是外边框晕染的范围
                        "circle-stroke-width": [
                            "step",
                            ["get", "countTotal"],
                            5, //蓝色晕染长度，当点数小于100时为5px晕染
                            100, //对应上面circle-color 数字，意思为100以内
                            6, //点计数在100到750之间时为黄色，6px晕染
                            750, //对应上面circle-color 数字，意思为750以内
                            7 //点计数大于或等于750时为7px像素的粉红色晕染
                        ]
                    }
                });
                //聚合图圆圈中的数字
                map.addLayer({
                    id: "cluster-count",
                    type: "symbol",
                    source: "earthquakes",
                    filter: ["has", "countTotal"],
                    layout: {
                        // "text-field": "{point_count_abbreviated}", //原来mapbox的值
                        "text-field": "{countTotal}" + "\n" + "{xzqhmc}",//我们找到我们自己要展示的值
                        "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"],
                        "text-size": 12
                    },
                    // 添加这个就可以改变圆圈内字样式，这里我改变了他的颜色
                    paint: {
                        "text-color": "#fff",
                        "text-opacity": 1
                    }
                });
                // 聚合图中没有数字的显示小圆点
                map.addLayer({
                    id: "unclustered-point",
                    type: "circle",
                    source: "earthquakes",
                    filter: ["!", ["has", "countTotal"]],
                    paint: {
                        "circle-color": "#11b4da",
                        "circle-radius": 4,
                        "circle-stroke-width": 1,
                        "circle-stroke-color": "#fff"
                    }
                });

                // 单击时检查群集
                map.on("click", "clusters", function (e) {
                    var features = map.queryRenderedFeatures(e.point, {
                        layers: ["clusters"]
                    });
                    var clusterId = features[0].properties.cluster_id;
                    map
                        .getSource("earthquakes")
                        .getClusterExpansionZoom(clusterId, function (err, zoom) {
                            if (err) return;
                            map.easeTo({
                                center: features[0].geometry.coordinates,
                                zoom: zoom
                            });
                        });
                });

                map.on("mouseenter", "clusters", function () {
                    map.getCanvas().style.cursor = "pointer";
                });
                map.on("mouseleave", "clusters", function () {
                    map.getCanvas().style.cursor = "";
                });
            });
            window.map = map;
        }
    </script>
    <title>Document</title>
</head>

<body onload="init()"
    style="margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
    <div id="map" style="width: 100%; height: 100%;"></div>

</body>

</html>